<template>
  <div class="upload-section">
    <h1 class="slogan">
      <span class="gradient-text">AI简历优化专家</span><br>
      让你的简历通过率提升300%
    </h1>

    <div class="upload-zone" @dragover.prevent @drop="handleDrop">
      <el-upload
          class="upload-core"
          drag
          action="#"
          :auto-upload="false"
          :show-file-list="false"
          @change="emitUpload"
      >
        <template #trigger>
          <div class="upload-content">
            <el-icon class="upload-icon">
              <Upload />
            </el-icon>
            <div class="upload-text">
              <p>拖拽简历文件至此 或 <em>点击上传</em></p>
              <p class="support-format">支持格式：PDF/DOCX/TXT</p>
            </div>
          </div>
        </template>
      </el-upload>
    </div>
  </div>
</template>

<script setup>
import { Upload } from '@element-plus/icons-vue'
import { defineEmits } from 'vue'

const emit = defineEmits(['file-upload'])

const handleDrop = (e) => {
  const files = e.dataTransfer.files
  if (files.length > 0) {
    emitUpload(files[0])
  }
}

const emitUpload = (file) => {
  emit('file-upload', file)
}
</script>

<style lang="scss" scoped>
.upload-section {
  text-align: center;
  margin-bottom: 4rem;

  .slogan {
    font-size: 2.8rem;
    line-height: 1.3;
    margin-bottom: 3rem;

    .gradient-text {
      background: linear-gradient(135deg, #409EFF 0%, #36c2cf 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .upload-zone {
    border: 2px dashed #dcdfe6;
    border-radius: 16px;
    background: white;
    padding: 3rem;
    transition: all 0.3s;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    &:hover {
      border-color: #409EFF;
      transform: translateY(-2px);
    }

    :deep(.el-upload-dragger) {
      border: none;
      padding: 0;
    }

    .upload-content {
      .upload-icon {
        font-size: 4rem;
        color: #409EFF;
        margin-bottom: 1rem;
      }

      .upload-text {
        font-size: 1.2rem;

        em {
          color: #409EFF;
          font-style: normal;
        }

        .support-format {
          color: #909399;
          font-size: 0.9rem;
          margin-top: 0.5rem;
        }
      }
    }
  }
}
</style>